<template>
  <a-spin :spinning="spinning" tip="工程类别加载中..." style="width: 100%">
    <!-- 工程类别选项卡 -->
    <a-tabs v-if="titleList.length > 0" v-model="projectTypeId" @change="handleChange">
      <!-- 工程类别列表 -->
      <a-tab-pane v-for="item in titleList" :key="item.id">
        <div slot="tab">
          {{ item.name }}
        </div>
        <slot />
      </a-tab-pane>
    </a-tabs>
    <div v-if="titleList.length == 0 && !spinning" class="mb12" align="center" style="width: 100%">
      <b>暂无工程类别信息</b>
    </div>
  </a-spin>
</template>

<script>
import { queryLists } from '@/api/quality/projectDivision' // api

export default {
  name: 'TabsProductType',
  data() {
    return {
      spinning: false, // 加载控件
      titleList: [], // 工程类别列表
      tabTypeId:null, //选中的工程类别id
    }
  },
  props: {
    // 当前工程类别id
    id: {
      type: [String, Number],
      default: () => ''
    },
    // 是否显示包括禁用的全部咧白哦
    isAll: {
      type: Boolean,
      default: () => false
    },
    //项目id
    projectId: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 选中工程类别id
    projectTypeId: {
      get: function () {
        return this.id
      },
      set: function (e) {
        this.$emit('update:id', e)
      }
    },
    option() {
      let e = this.projectTypeId
      return this.titleList.find((item) => item.id == e)
    },
  },
  watch: {
    projectId(val) {
       this.getTitle(val)
       sessionStorage.removeItem('setProjectTypeIndex')
    },
    option(e) {
      this.$emit('update:option', e)
    },
    projectTypeId(val){
      //
    }
  },
  mounted() {

  },
  methods: {
    // 获取工程类别列表
    getTitle(val) {
      this.spinning = true
      return queryLists({projectId:val,sort:true})
        .then((res) => {
          this.spinning = false
          if (res.code == 200) {
            let hasList = res.data.length > 0
            if (this.isAll) {
              this.titleList = res.data || [];
            } else {
              this.titleList = res.data.filter((item) => item.status == 1) // 过滤停用项
            }
            // !this.projectTypeId && hasList && (this.projectTypeId = this.titleList[0].id) // 设置第一个为默认选项
           let setProjectTypeIndex = sessionStorage.getItem('setProjectTypeIndex');
            let findId = null,
            sourceId = null;
            if(setProjectTypeIndex){
              let findData = this.titleList[setProjectTypeIndex];
              findId = findData?.id;
              sourceId = findData?.sourceId || findData?.id;
            }
            this.projectTypeId = findId?findId:this.titleList[0]?.id; //设置第一个为默认选项
            let newSourceId = sourceId?sourceId:this.titleList[0].sourceId || this.titleList[0].id;
            this.$emit('switchData', this.titleList)
            this.$emit('switch',this.projectTypeId || null ,newSourceId)
            return hasList
          }
        })
        .catch((e) => {
          this.spinning = false
        })
    },
    // 切换工程类别
    handleChange(e) {
      let findData = this.titleList.find((item)=>item.id == e);
      let findIndex = this.titleList.findIndex((item)=>item.id == e);
      this.projectTypeId = e;
      sessionStorage.setItem('setProjectTypeIndex',findIndex)
      // 获取分项工程
      this.$nextTick(() => {
        this.$emit('switch', e,findData?.sourceId || findData?.id,true)   //没有sourceId就用id
      })
    }
  }
}
</script>
